<template>
	
	<!-- 登录之后的 -->
	<view class="container" v-if="isLogin">
		<!-- 账户 -->
		<view class="section">
			<view class="section-title">账户</view>
			<view class="list-item">
				<image class="item-icon" src="/static/icons/phone.png"></image>
				<text class="item-text">手机号</text>
				<text class="item-value">159****7678</text>
			</view>
			<view class="list-item">
				<image class="item-icon" src="/static/icons/wechat.png"></image>
				<text class="item-text">微信</text>
				<text class="item-value">已绑定</text>
			</view>
			<view class="list-item">
				<image class="item-icon" src="/static/icons/data.png"></image>
				<text class="item-text">数据管理</text>
				<image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
			</view>
		</view>
	
		<!-- 应用 -->
		<view class="section">
			<view class="section-title">应用</view>
			<view class="list-item">
				<image class="item-icon" src="/static/icons/language.png"></image>
				<text class="item-text">语言</text>
				<text class="item-value">中文（简体中文）</text>
				<image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
			</view>
			<view class="list-item">
				<image class="item-icon" src="/static/icons/theme.png"></image>
				<text class="item-text">外观</text>
				<text class="item-value">系统</text>
				<image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
			</view>
			<view class="list-item">
				<image class="item-icon" src="/static/icons/fontsize.png"></image>
				<text class="item-text">字体大小</text>
				<image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
			</view>
		</view>
	
		<!-- 关于 -->
		<view class="section">
			<view class="section-title">关于</view>
			<view class="list-item">
				<image class="item-icon" src="/static/icons/update.png"></image>
				<text class="item-text">检查更新</text>
				<text class="item-value">1.2.7(89)</text>
				<image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
			</view>
			<view class="list-item">
				<image class="item-icon" src="/static/icons/agreement.png"></image>
				<text class="item-text">服务协议</text>
				<image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
			</view>
		</view>
	
		<!-- 联系我们 -->
		<view class="section">
			<view class="list-item">
				<image class="item-icon" src="/static/icons/contact.png"></image>
				<text class="item-text">联系我们</text>
				<image class="arrow-icon" src="/static/icons/arrow-right.png"></image>
			</view>
		</view>
	</view>
	
	<!-- 登录之前看得到的登录框 -->
	<view class="container" v-else>
		<uni-section title="用户登录" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :modelValue="baseFormData">
					<uni-forms-item label="手机号:" required>
						<uni-easyinput v-model="baseFormData.tel" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="密码:" required>
						<uni-easyinput type="password" v-model="baseFormData.passwd" placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>

				<view class="button-group">
					<button type="primary" size="mini" @tap="submit('baseForm')">提交</button>
				</view>
			</view>
		</uni-section>
	</view>
	
	
</template>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>



<style>
	.container {
		background-color: #f8f8f8;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		height: 100rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #eaeaea;
	}

	.icon-back {
		width: 40rpx;
		height: 40rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.section {
		margin-top: 20rpx;
		background-color: #ffffff;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.section-title {
		padding: 20rpx 30rpx;
		font-size: 26rpx;
		color: #999999;
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 26rpx 30rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.list-item:first-child {
		border-top: none;
	}

	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.item-text {
		flex: 1;
		font-size: 30rpx;
		color: #333333;
	}

	.item-value {
		font-size: 28rpx;
		color: #999999;
		margin-right: 20rpx;
	}

	.arrow-icon {
		width: 28rpx;
		height: 28rpx;
	}
</style>



<script>
	// 导入全局变量 @是指根路径
	import config from '@/common/config.js'

	export default {
		data() {
			return {
				// 基础表单数据
				baseFormData: {
					tel: '',
					passwd: '',
				},
				isLogin: false,
				user_id:0,
			}
		},
		// 当页面加载完成后,会自动执行
		onLoad() {
			// 缓存this
			let _this = this
			// 尝试去获取用户的id
			uni.getStorage({
				key: 'user_id',
				success: function (res) {
					console.log(9999999, res.data);
					if(res.data){
						console.log('获取成功')
						_this.user_id = res.data
						_this.isLogin = true
					}
				}
			});
		},
		methods: {
			submit(ref) {
				console.log(this.baseFormData)
				// 忽略数据验证，直接提交数据到服务器
				uni.request({
				    url: config.baseUrl + '/user/login/', //用户登录
				    data: this.baseFormData,
					method:'POST',
				    header: {
				        'content-type': 'application/x-www-form-urlencoded' //方便django接收
				    },
				    success: (res) => {
				        console.log(res.data);
						let data = res.data
						if(data.code == 200){
							uni.setStorage({
								key: 'user_id',
								data: data.user_id,
								success: function () {
									console.log('success');
								}
							});
							this.isLogin = true
						}
						uni.showToast({
							title: data.message,
							duration: 1500
						});

				    }
				});
			},
		}
	}
</script>